<template>
  <view :data-theme='globPrimary'>
    <u-navbar :z-index='20075' :custom-back='onBack'>
      <view class='exam-navbar-content u-flex u-row-center' v-if='title'>
        <view class='title u-line-1'  @click='onCategory(1)'>{{ title }}</view>
<!--        <u-icon name='arrow-down-fill' color='#606266' size='20' @click='onCategory(1)'></u-icon>-->
      </view>
      <!--      <u-icon-->
      <!--        name="shaixuan"-->
      <!--        custom-prefix="edu-icon"-->
      <!--        size="40"-->
      <!--        :color="globPrimaryColor"-->
      <!--        slot="right"-->
      <!--        class="exam-navbar-right"-->
      <!--        @click="onCategory(2)"-->
      <!--      ></u-icon>-->
    </u-navbar>
    <!-- 顶部筛选 -->
    <view class='category-scroll'>
<!--      <view :style='[popupStyle]'></view>-->
      <view class='exam-category-list' >
        <view
          class='category-item default u-line-1'
          :key='-1'
          :class='[{ active: specialtyId == 0 }]'
          @click="onSpecialtyItem({'id':0,title:'全部'})"
        >
          全部
        </view>
        <view
          class='category-item default u-line-1'
          v-for='(item, index) in specialtyList'
          :key='index'
          :class='[{ active: specialtyId == item.id }]'
          @click='onSpecialtyItem(item)'
        >
          {{ item.title }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { int16 } from '../../../hybrid/html/pdf-view/js/fontkit.umd'

export default {
  data() {
    return {
      titleWidth: 200,
      specialtyId: 0, // 一级id
      specialtyList: [], // 一级数据
      specialtyTitle: '', // 一级标题
      // categoryId: 0, // 二级id
      categoryList: [], // 二级数据
      categoryTitle: '', // 二级标题
      categoryChildId: 0, // 三级id
      categoryChildList: [], // 三级数据
      show: false,
      // title: '',
      categoryType: 0
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight'
    }),
    popupStyle() {
      let style = {}
      style.width = '100%'
      style.height = this.globNavbarHeight + this.globStatusBarHeight + 'px'
      return style
    }
  },
  props: {
    categoryId: {
      type: int16, // 或者其他相应的类型
      required: true
    },
    title: {
      type: String, // 或者其他相应的类型
      required: true
    }
  },
  watch: {
    categoryId(newVal) {
      console.log('Module ID received:', newVal);
      this.getCategoryInfo()
    },
    title(newVal) {
      // console.log('Module ID received:', newVal);
      this.title=newVal
    },
  },
  created(option) {

    this.getCategoryInfo()

  },
  mounted() {
    this.$nextTick(() => {
      this.$emit('change', 0); // 在子组件挂载后触发
    });
  },
  methods: {
    // 打开/关闭窗口
    onCategory(val) {
      if (this.show) {
        if (this.categoryType == val) {
          // this.show = false
          this.categoryType = 0
        } else {
          this.categoryType = val
        }
      } else {
        // this.show = true
        this.categoryType = val
      }
    },
    // 一级
    getCategoryInfo() {
      this.$edu.api.getCategorySecond({
        pid: this.categoryId
      }).then((res) => {
        const { data } = res
        if (!this.$u.test.empty(data)) {
          let { id, title } = data.find((item, index) => index == 0)
          // this.specialtyId = id
          this.specialtyTitle = '全部'
          this.specialtyList = data
          // this.getCategorySecond(id)
        }
        // this.handleCategory(this.specialtyId)
      })
    },
    // 二级筛选
    // getCategorySecond(id) {
    //   this.$edu.api
    //     .getCategorySecond({
    //       pid: id,
    //     })
    //     .then((res) => {
    //       const { data } = res
    //       this.categoryList = data
    //       this.categoryChildId = 0
    //       this.categoryChildList = []
    //     })
    // },
    // 点击一级分类
    onSpecialtyItem(data) {
      let { id, title } = data
      this.specialtyId = id
      // this.categoryId = id
      this.specialtyTitle = title
      // this.getCategorySecond(id)
      this.show = false
      this.$emit('change', id)
    },
    // 点击二级分类
    onCategoryItem(data) {
      let { id, title, child } = data
      // this.categoryId = id
      this.categoryChildId = id
      if (this.$u.test.empty(child)) {
        this.categoryTitle = ''
        this.categoryChildList = []
      } else {
        this.categoryChildList = child
        this.categoryTitle = title
      }
    },
    // 点击三级分类
    onCategoryChildItem(id) {
      this.categoryChildId = id
    },
    handleCategory(id) {
      this.show = false
      if (id) {
        this.$emit('change', id)
      }
    },
    // 返回上一页
    onBack() {
      this.$u.route({ type: 'tab', url: 'pages/exam/index' })
    }
  }
}
</script>

<style lang='scss' scoped>
.exam-navbar-content {
  height: 60rpx;
  text-align: center;
  flex-shrink: 0;
  position: absolute;
  width: 400rpx;
  left: 50%;
  margin-left: -200rpx;

  .title {
    margin-right: 10rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #303133;
    max-width: 220rpx;
  }
}

.exam-navbar-right {
  margin-right: 30rpx;
}

.exam-category-title {
  font-size: 28rpx;
  font-weight: 400;
  color: #909399;
  padding: 0 30rpx;
  margin-top: 30rpx;
}
.category-scroll {
  display: flex;
  flex-wrap: wrap; /* 允许多行显示 */
  justify-content: space-between; /* 保证每行的四个元素间距平均 */
  border-top: 1rpx #eef0f4 solid;
}
.exam-category-list {
  padding: 0 6rpx 30rpx 30rpx;
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .category-item {
    &.active {
      //@include text-color();
      color: #FFF;
      background: #19c349;
    }
    height: 64rpx;
    background: #fff;
    border-radius: 9rpx;
    border:1px solid #19c349;
    margin-top: 28rpx;
    margin-right: 24rpx;
    font-size: 24rpx;
    color: #19c349;
    line-height: 64rpx;
    text-align: center;


    &.default {
      padding: 0 10rpx;
      width: 21%; /* 每个 item 占据容器宽度的约 1/4 */
    }

    &.primary {
      padding: 0 30rpx;
      max-width: 252rpx;
    }
  }
}

.exam-category-bottom {
  .left {
    flex: 1;
  }

  .right {
    flex: 1;
  }

  .btn {
    padding: 0;
    font-size: 30rpx;
    color: #606266;
    font-size: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #ffffff;
  }

  ::v-deep button {
    border-radius: 0;
  }

  ::v-deep button:after {
    border-radius: 0;
  }
}
</style>
